@import "../../../../../shared/color";

.ld2-library-item-container {
	overflow-y: auto;
	width: 100%;
	display: flex;
	justify-content: center;
}

.grid-view-container {
	&.empty {
		align-items: center;
		align-content: center;
	}
}


.grid-view-container {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: flex-start;
	align-content: flex-start;
	max-width: 1280px;
	
	
	.grid-view-item {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		min-width: 210px;
		padding: 10px;
		max-width: 250px;
		
		&.placeholder {
			height: 0px;
			padding: 0px;
		}
		
		.grid-view-item-content {
			background-color: #fff;
			box-shadow: 0 1px 3px rgba(0, 0, 0, .02), 0 4px 8px rgba(0, 0, 0, .02);
			border-radius: 3px;
			overflow: hidden;
			transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
			position: relative;
			width: 100%;
			
			&:hover {
				box-shadow: 0 1px 3px rgba(0, 0, 0, .02), 0 16px 32px -4px rgba(0, 0, 0, .17);
				transform: translateY(-1px);
			}
			
			.ld2-image-mark-button {
				z-index: 1;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				transition: background-color .2s;
				background-color: rgba(255, 255, 255, 0);
				display: none;
				width: 100%;
				padding-bottom: 140px;
				
				button {
					margin: 4px 0px;
				}
			}
			
			.ld2-image-mark-text {
				z-index: 1;
				background-color: #ffffff;
				display: flex;
				justify-content: flex-end;
				align-items: flex-start;
				flex-direction: column;
				padding: 6px 10px 0px 14px;
				text-align: center;
				font-weight: bold;
				color: #575757;
				transition: bottom .2s;
				
				& > div {
					//padding-left: 8px;
				}
				
				.c-code {
					font-size: 16px;
					color: #1b1b1b;
					text-align: center;
				}
				
				.c-price {
					font-size: 14px;
					//color: #ff1000;
					color: @primary-color;
					text-align: center;
					font-weight: 600;
				}
				
				.c-title {
					font-weight: normal;
					color: #7a7a7a;
					font-size: 12px;
					word-wrap: break-word;
					word-break: normal;
					width: 100%;
					text-align: left;
					min-height: 36px;
					
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				
				.c-buttons {
					//border-top: 1px solid #f6f6f6;
					padding: 4px 0 8px;
					width: 100%;
					//background-color: #fafafa;
					text-align: left;
					
					.ant-tag {
						cursor: pointer;
					}
					
					.collected {
						padding: 2px 0;
						display: inline-block;
					}
				}
				
				.c-season {
					padding: 4px 0 8px 0;
				}
				
				.c-price {
					display: flex;
					width: 100%;
					padding-top: 2px;
					padding-bottom: 0px;
					
					& > .price-item {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						flex-grow: 1;
						
						.c-price-title {
							color: #bababa;
							//padding-left: 13px;
						}
						
						span {
							font-size: 12px;
							color: #bababa;
						}
						
						.c-price-value {
							font-size: 18px;
							color: #575757;
						}
					}
				}
			}
			
			//走马灯
			.ld2-carousel-container {
				position: relative;
				min-height: 180px;
				background-color: #dedede;
				
				.img-loader-spin {
					display: flex;
					min-height: 205px;
					align-items: center;
					justify-content: center;
					min-height: 200px;
				}
				
				img {
					cursor: pointer;
				}
				
				.ant-carousel {
					line-height: 0;
				}
				
				&:hover {
					.navigator {
						display: flex;
					}
				}
				
				
				.navigator {
					z-index: 1;
					position: absolute;
					top: 0px;
					bottom: 0px;
					display: none;
					align-items: center;
					font-size: 20px;
					font-weight: bold;
					color: rgba(131, 131, 131, 0.28);
					cursor: pointer;
					
					& > i {
						padding: 10px;
						transition: background-color .4s;
					}
					
					&:hover {
						color: #000000;
						
						& > i {
							background-color: rgba(255, 255, 255, 0.6);
						}
					}
					
					&.navigator-left {
						left: 0px;
						
						& > i {
							border-bottom-right-radius: 3px;
							border-top-right-radius: 3px;
						}
					}
					
					&.navigator-right {
						right: 0px;
						
						& > i {
							border-bottom-left-radius: 3px;
							border-top-left-radius: 3px;
						}
					}
				}
				
				.slick-dots {
					bottom: 20px;
					
					li {
						vertical-align: middle;
					}
					
					.slick-active {
						button {
							background-color: #505050;
						}
					}
					
					button {
						//border: 2px solid #ffffff;
						height: 8px;
						width: 8px;
						background-color: rgba(181, 181, 181, 0.77);
						border-radius: 50%;
						opacity: 1;
					}
				}
			}
		}
		
		img {
			width: 100%;
		}
	}
}

@media screen and (max-width: 1330px) {
	.grid-view-container {
		.grid-view-item {
			width: 25%;
		}
	}
}




